import React from 'react';
import { Table } from 'antd';

const columns = [{
  title: '帐号',
  dataIndex: 'username',
  key: 'username',
  width: 150,
}, {
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
  width: 150,
}, {
  title: '号码',
  dataIndex: 'phone',
  key: 'phone',
  width: 200,
}, {
  title: '邮件',
  dataIndex: 'email',
  key: 'email',
  width: 200,
}, {
  title: '站点',
  dataIndex: 'website',
  key: 'website',
  width: 200,
}, {
  title: '操作',
  key: 'action',
  render: (text, record) => (
    <span>
      <a href="#">删除</a>
      <span className="ant-divider" />
      <a href="#">修改</a>
    </span>
  ),
  width: 100,
}];

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
  getCheckboxProps: record => ({
    disabled: record.website === 'ramiro.info',    // Column configuration not to be checked
  }),
};


const HomePageTable = React.createClass({
  getInitialState() {
    return {
      data: [],
      pagination: {
        total: 0,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => {
          console.log('Current: ', current, '; PageSize: ', pageSize);
        },
        onChange: (current) => {
          console.log('Current: ', current);
        },
      },
      loading: false,
    };
  },
  handleTableChange(pagination, filters, sorter) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetchData({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  },
  fetchData(params = {}) {
    console.log('params:', params);
    this.setState({ loading: true });

    fetch('http://jsonplaceholder.typicode.com/users', {
      // method: 'POST',
      // headers: {
      //   'Content-Type': 'application/json'
      // },
      // body: JSON.stringify({
      //   name: 'Hubot',
      //   login: 'hubot',
      // })
    }).then(function(response) {
      return response.json();
    }).then(json =>this.dataAction({json})).catch(function(ex) {
      console.log('EX ERROR', ex)
    });
  },
  dataAction(datas) {
    const pagination = this.state.pagination;
    pagination.total = 500 * 123// datas.length;
    this.setState({
      loading: false,
      data: datas.json,
      pagination,
    });
  },
  componentDidMount() {
    this.fetchData();
  },
  render() {
    return (
      <Table columns={columns}
        rowKey={record => record.id}
        dataSource={this.state.data}
        pagination={this.state.pagination}
        loading={this.state.loading}
        onChange={this.handleTableChange}
        // ${address.city} ${address.street} ${address.suite} (${address.zipcode})
        expandedRowRender={record =>
          <p>My name is {record.name},
          I’m houres it is {record.address.city} {record.address.street} {record.address.suite}
          ({record.address.zipcode} geo:(lat:{record.address.geo.lat},lng:{record.address.geo.lng})).
          <br />
          My Company name’s {record.company.name}, catchPhrase: {record.company.catchPhrase}, bs: {record.company.bs}.</p>
        }
        bordered
        title={() => '模拟异步数据加载'}
        footer={() => '模拟异步数据加载'}
        rowSelection={rowSelection}
      />
    );
  },
});

export default HomePageTable;
